<template>
	<view style="padding-top: 20rpx;">
		<view class="fav" v-for="(fav,index) in favList" :key="fav.id">
			<view class="d-flex d-flex-between d-flex-middle">
				<view class="d-flex d-flex-middle">
					<image :src="fav.riderAvatar" style="width: 80rpx;height: 80rpx;border-radius: 80rpx;margin-right: 15rpx;"></image>
					<view class="d-flex d-flex-column" @click="callPhone(fav.riderPhone)">
						<text>{{fav.riderNickName}}</text>
						<text style="font-size: 22rpx;color: #999;">TEL：{{fav.riderPhone}}</text>
						
					</view>
				</view>
				<view style="font-size: 24rpx;color: #438afc;" @click="deleteFav(fav.riderUserId,index)">取消收藏</view>
			</view>
		</view>
		<view class="load-more d-flex d-flex-center d-flex-column d-flex-middle">
			<image class="mb-2" v-if="loadingType == 2 && favList.length == 0"
				src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/empty.png"
				style="width: 198rpx;height: 128rpx;margin-top: 260rpx;"></image>
			<text>{{loadingType === 0 ? '上拉显示更多' : (loadingType === 1 ? '正在加载...' : '~ 没有更多数据了 ~')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingType:1,
				page: 1,
				favList:[]
			}
		},
		onLoad() {
			this.getFav()
		},
		methods: {
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			deleteFav(riderId,index){
				let that = this
				that.$Request.postT("/app/user/favorite/remove", {'riderUserId':riderId}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title:'操作成功！'
						})
						setTimeout(()=>{
							that.favList.splice(index,1)
						},1000)
					} else {
						uni.showToast({
							icon: 'none',
							title: '操作失败!'
						});
					}
				});
			},
			getFav(){
				this.$Request.getT("/app/user/favorite/list?page=1&limit=100").then(res => {
					console.log('res',res)
					if(res.code == 0){
						this.favList = res.data.list
					}
					this.loadingType = 2
				});
			},
		}
	}
</script>

<style>
page {
	background: #f5f5f5;
}
.load-more{padding:50rpx 0 60rpx;color:#bbb;font-size: 26rpx;}
.fav{
	background-color: #ffffff;
	padding:20rpx 30rpx;
	border-bottom: solid 1px #eeeeee
}
</style>
